import { TextAreaField } from '@aws-amplify/ui-react';
import { TextAreaFieldDemo } from './demo';
import {
  DefaultRequiredTextAreaFieldExample,
  DefaultTextAreaExample,
  RequiredTextAreaFieldExample,
  TextAreaMaxLengthExample,
  TextAreaResizableExample,
  TextAreaRowsExample,
  TextAreaSizeExample,
  TextAreaFieldDescriptiveExample,
  TextAreaFieldStatesExample,
  TextAreaFieldStylePropsExample,
  TextAreaFieldThemeExample,
  TextAreaFieldValidationErrorExample,
  TextAreaFieldVariationExample,
} from './examples';
import { Example, ExampleCode } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<TextAreaFieldDemo />

## Usage

Import the `TextAreaField` component and styles and provide a `label` for accessibility/usability.

<Example>
  <DefaultTextAreaExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultTextAreaExample.tsx
    
    ```

  </ExampleCode>
</Example>

### Accessibility

The form primitives are accessible by default. A matching `label` HTML element will be connected to the form control -- simply provide a `label` prop with a `string` or `ReactNode`. If no `id` is provided, one will be automatically generated and connected to both `label` and form control elements.

### Resizeable

For a resizeable multiline field, use `resize` prop. Common values are `horizontal`, `vertical`, `both`. See [MDN resize docs](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for supported values.

<Example>
  <TextAreaResizableExample />
  <ExampleCode>
    ```jsx file=./examples/TextAreaResizableExample.tsx

    ```

  </ExampleCode>
</Example>

### Size

To change the general size, use the `size` prop. Available options are `small`, none (default), and `large`.

<Example>
  <TextAreaSizeExample />
  <ExampleCode>
    ```jsx file=./examples/TextAreaSizeExample.tsx

    ```

  </ExampleCode>
</Example>

### Rows

To change the number of rows of text displayed, use the `rows` prop with desired number.

<Example>
  <TextAreaRowsExample />
  <ExampleCode>
    ```jsx file=./examples/TextAreaRowsExample.tsx

    ```

  </ExampleCode>
</Example>

### Maximum length

To enforce a maximum length of multiline text, use the `maxLength` prop.

<Example>
  <TextAreaMaxLengthExample />
  <ExampleCode>
    ```jsx file=./examples/TextAreaMaxLengthExample.tsx

    ```

  </ExampleCode>
</Example>

### Variations

There are two variation styles available: default and `quiet`.

<Example>
  <TextAreaFieldVariationExample />
  <ExampleCode>
  ```jsx file=./examples/TextAreaFieldVariationExample.tsx
  ```
  </ExampleCode>

</Example>

### Descriptive text

To provide additional descriptive text of requirements of the field, use the `descriptiveText` field:

<Example>
  <TextAreaFieldDescriptiveExample />
  <ExampleCode>
    ```jsx file=./examples/TextAreaFieldDescriptiveExample.tsx

    ```

  </ExampleCode>
</Example>

### States

The available `TextAreaField` states include `isDisabled` and `isReadOnly`. A disabled field will be not be focusable not mutable and will not be submitted with form data. A readonly field cannot be edited by the user.

<Example>
  <TextAreaFieldStatesExample />
  <ExampleCode>
    ```jsx file=./examples/TextAreaFieldStatesExample.tsx

    ```

  </ExampleCode>
</Example>

### Required fields

Use the `isRequired` prop to specify a required field.

<Example>
  <DefaultRequiredTextAreaFieldExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultRequiredTextAreaFieldExample.tsx

    ```

  </ExampleCode>
</Example>

There is no default styling for required fields. Customize the `label` or `descriptiveText` to instruct the form user of the required field.

<Example>
  <RequiredTextAreaFieldExample />
  <ExampleCode>
    ```jsx file=./examples/RequiredTextAreaFieldExample.tsx

    ```

  </ExampleCode>
</Example>

### Validation error styling

Use the `hasError` and `errorMessage` fields to mark a `TextAreaField` with a validation error.

<Example>
  <TextAreaFieldValidationErrorExample />
  <ExampleCode>
    ```jsx file=./examples/TextAreaFieldValidationErrorExample.tsx

    ```

  </ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="TextAreaField">
  <Example>
    <TextAreaFieldThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/TextAreaFieldThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="TextAreaField" />

### Global styling

To override styling on all TextAreaField primitives, you can set the Amplify CSS variables with the built-in `.amplify-textareafield` class.

<Example>
  <TextAreaField
    label="Globally styled field"
    className="globally-styled-textareafield"
  />
  <ExampleCode>
    ```css
    /* styles.css */
    .amplify-textareafield {
      --amplify-components-fieldcontrol-border-color: rebeccapurple;
    }
    ```
  </ExampleCode>
</Example>

### Local styling

To override styling on a specific TextAreaField, you can use a class selector or style props.

_Using a class selector:_

<Example>
  <TextAreaField className="custom-textareafield-class" label="Square field" />
  <ExampleCode>
    ```css
    /* styles.css */
    .custom-textareafield-class .amplify-textarea {
      border-radius: 0;
    }
    ```
  </ExampleCode>
</Example>

_Using style props:_

All style props will be applied to the [`Flex`](flex) wrapper of the `TextAreaField`. To style the `textarea` of the `TextAreaField`, you can pass a `inputStyles` prop with the style props you want to apply to the input.

<Example>
  <TextAreaFieldStylePropsExample />
  <ExampleCode>
    ```jsx file=./examples/TextAreaFieldStylePropsExample.tsx

    ```

  </ExampleCode>
</Example>